<template>
  <div class="container">
      <van-search
        :value="value"
        placeholder="请输入搜索关键词"
        @search="onSearch"
        shape="round"
        :focus="focus"
      >
      </van-search>
      <ul>
        <li v-for="(item,index) in courseList" :key="index">
          <div  v-if="item.article_type=='3'"><!-- 悬赏问答-->
              <questionlist :queList="item" type="2"></questionlist>
          </div>
          <div v-if="item.article_type=='4'" style="padding-top:10px;"><!-- 视频-->
              <videoList :videoList="item" :type="2"></videoList>
          </div>   
          <div v-if="item.article_type=='5'"><!-- 拼拼课-->
                <courseList :kcList="item"  :key="idx" :type="1"> </courseList>
                <div class="line"></div>
          </div>
          <div v-if="item.article_type=='6'"><!-- 砍价秒抢-->
                <courseList :kcList="item"  :key="idx" :type="2"> </courseList>
                <div class="line"></div>
          </div>
          <div v-if="item.article_type=='1'"><!--  专栏-->
                <special :specialList="item"  type="2" @click="likeclick" :isz="1"></special>
          </div>
          <div v-if="item.article_type=='2'"><!--  教育资讯-->
                <special :specialList="item"  type="2" @click="likeclick" :isz="0"></special>
          </div>
        </li>
      </ul>
      <div v-if="isempty" class="que">
          <img src="/static/images/que/no_conten@2x.png" alt="" >
      </div>
  </div>
</template>

<script>
import swiper from "@/components/swiper";
import top from "@/components/top"
import navList from "@/components/nav";
import courseList from "@/components/list";
import special from "@/components/special";
import questionlist from "@/components/questionlist";
import videoList from "@/components/videoList"
import {search} from "@/api/operate"
export default {
  components: {
      courseList,
      special,
      questionlist,
      videoList

  },

  data () {
    return {
      courseList:[],
      value:"",
      load:false,
      keyword:"",
      page:1,
      isempty:false,
      img: this.$URL.imgurl,
      focus:true
    }
  },
  methods:{
    getList(){
      let data={};
          data.page=this.page;
          data.keywords=this.keyword;
          search(data).then(res=>{
            console.log(res)
            if(res.code==200){
              let last_page=res.data.data.total;
              if(this.page==1){
                  this.courseList=res.data.data.data
              }else{
                  this.courseList=this.courseList.concat(res.data.data.data)
              }
              if(last_page>this.page){
                this.load=true
              }else{
                this.load=false
              }
            }else if(res.code==201){
                this.isempty=true
            }
          }).catch(res=>{
                this.isempty=true
          })
    },
    onSearch(e){
      console.log(this.value)
      this.focus=false
      this.isempty=false
      this.keyword=e.mp.detail
      this.courseList=[]
      if(this.keyword==""){
         wx.showToast({
           title: '请输入关键字',
           icon: 'none',
         });
      }else{
         this.getList()
      }
    }
  },
  created () {
    
  },
  onReachBottom() {
      if (this.load){
         this.page += 1
         this.getList()
      }
      
  },
  onLoad(){
      Object.assign(this.$data, this.$options.data())
  }
}
</script>
<style>
.classify .nav .nav-item {
  width: 20%;
}
</style>
<style  lang="scss">
    li .listItem .weui-media-box::after {
      border-bottom: none;
    }
    .specialNav{
      font-size:14px;
      font-weight:500;
      color:rgba(51,51,51,1);
      text-align:center;
      height:40px;
      background:rgba(255,255,255,1);
      box-shadow:0px 2px 4px 1px rgba(0, 0, 0, 0.07);
      line-height:40px;
      .icon{
        width:4px;
        height:9px;
        margin-left:1px;
      }
      .top-bar-active{
        color:#1A84FB;
      }
    }
    .que{
      width: 417rpx;
      height: 324rpx;
      display: block;
      margin: 50px auto;
      img{
        width: 417rpx;
        height: 324rpx;
        display: block;
      }
    }
    li .queList .ques{
      &::after{
          border-bottom:none;
      }
    }
</style>
